<template>

	<!-- 
	  自定义导航栏组件, 适配不同手机依旧能和微信小程序胶囊对其
	 -->

	<view class="nav-bar-custom" :style="{height: navBarHeight + statusBarHeight, paddingTop: statusBarHeight}">
		<view class="nav-bar" :style="{height: navBarHeight}">
			<slot>
				<view class="nav-wrap">
					<uni-icons class="left-icon" :type="leftIcon" size="40px" :color="leftColor" @click="leftHandle"
						v-if="left"></uni-icons>
					<text class="nav-title" :style="customTitle" @click="titleClickHandle">{{ title }}</text>
					<uni-icons class="right-icon" :type="rightIcon" size="25" :color="rightColor"
						v-if="right"></uni-icons>
				</view>
			</slot>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//状态栏高度
				statusBarHeight: '',
				//导航栏高度
				navBarHeight: '',
				//胶囊高度
				ButtonBoundingHeight: ''
			}
		},
		props: {
			title: {
				type: String,
				default: "标题"
			},
			customTitle: {
				type: Object,
				default: function() {
					return {};
				}
			},
			left: {
				type: Boolean,
				default: false
			},
			leftIcon: {
				type: String,
				default: "arrow-left"
			},
			leftColor: {
				type: String,
				default: "#3a3a3a"
			},
			right: {
				type: Boolean,
				default: false
			},
			rightIcon: {
				type: String,
				default: "plusempty"
			},
			rightColor: {
				type: String,
				default: "#3a3a3a"
			},

		},
		created() {
			// #ifdef MP-WEIXIN
			//获取胶囊信息
			let menu = wx.getMenuButtonBoundingClientRect()
			//获取手机系统信息
			uni.getSystemInfo({
				success: res => {
					this.statusBarHeight = res.statusBarHeight + 'px'
					this.navBarHeight = ((menu.top - res.statusBarHeight) * 2 + menu.height) + 'px'
					this.ButtonBoundingHeight = menu.height + 'px'
				}
			})
			// #endif

			// #ifdef APP
			uni.getSystemInfo({
				success: res => {
					this.statusBarHeight = res.statusBarHeight + 'px'
					// this.navBarHeight = ((menu.top - res.statusBarHeight) * 2 + menu.height) + 'px'
					this.navBarHeight = 40 + 'px'
					// this.ButtonBoundingHeight = 0 + 'px'
				}
			})
			// #endif
		},
		methods: {
			leftHandle() {
				this.$emit("leftIcon")
			},
			titleClickHandle() {
				this.$emit("title")
			}
		}
	}
</script>

<style scoped>
	@import url("@/static/css/nav.css");

	.nav-bar-custom {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.nav-bar {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
</style>